interface rectOption {
  x: number
  y: number
  width: number
  height: number
  color?: string
  cornerRadius?: number | number[]
}
interface textOption {
  x: number
  y: number
  text: string
  size: number
  color?: string
  width?: number
  line?: number
  textDecoration?: string
}
export interface textReturnOption {
  x: number
  y: number
  width: number
  height: number
  lastWidth: number
}
export function drawRect(
  ctx: CanvasRenderingContext2D,
  { x, y, width, height, cornerRadius = [], color = '' }: rectOption
) {
  let ltr = 0,
    rtr = 0,
    rbr = 0,
    lbr = 0,
    w = width,
    h = height

  if (typeof cornerRadius === 'number') {
    ltr = rtr = rbr = lbr = cornerRadius
  } else {
    ltr = cornerRadius[0]
    rtr = cornerRadius[1]
    rbr = cornerRadius[2]
    lbr = cornerRadius[3]
  }
  ctx.fillStyle = color
  ctx.beginPath()
  ctx.moveTo(x, y + ltr)
  ltr && ctx.arcTo(x, y, x + ltr, y, ltr)
  ctx.lineTo(x + w - rtr, y)
  rtr && ctx.arcTo(x + w, y, x + w, y + rtr, rtr)
  ctx.lineTo(x + w, y + h - rbr)
  rbr && ctx.arcTo(x + w, y + h, x + w - rbr, y + h, rbr)
  ctx.lineTo(x + lbr, y + h)
  lbr && ctx.arcTo(x, y + h, x, y + h - lbr, lbr)
  ctx.closePath()
  ctx.fill()
}
/**
 * 绘制圆形
 */
export function drawCircle(
  ctx: any,
  { x, y, r, sAngle, eAngle, counterclockwise }: any
) {
  ctx.beginPath()
  console.log(eAngle, 'x, y, r, sAngle, eAngle')

  // ctx.arc(100, 75, 50, 0, 2 * Math.PI)
  ctx.arc(x, y, r, sAngle, eAngle)
}

// 处理文字换行的绘制
export function textLineFeed(
  ctx: CanvasRenderingContext2D,
  { x, y, text, size, width, color = '', line, textDecoration }: textOption
) {
  ctx.font = `${size}px Arial`
  let textData: textReturnOption

  //参数说明
  //ctx：canvas的 2d 对象，t：绘制的文字，x,y:文字坐标，s 文字的大小/行高,w：文字最大宽度 c文字颜色
  let chr = text.split('') // 把当前文字转化为数组
  let temp = '' // 当前用来做比较的字符串
  let row = [] // 最后分完行的文字数组
  for (let a = 0; a < chr.length; a++) {
    let cur = ctx.measureText(temp)
    let next = ctx.measureText(temp + chr[a])
    if (!width || (cur.width < width && next.width <= width)) {
      temp += chr[a]
    } else {
      // 补充省略号
      if (line && line - 1 == row.length) {
        let lineArr = temp.split('')
        let index = lineArr.length
        // 省略号字符串需要占用的位置
        let ellipsis = ctx.measureText('...')
        // 需要删除的字符串
        let deleteStr = lineArr.reverse().reduce((cur, next) => {
          let text = cur + next
          let textAdd = ctx.measureText(text)
          if (textAdd.width > ellipsis.width) {
            return cur
          }
          return text
        }, '')
        lineArr.reverse()
        lineArr.splice(index - deleteStr.length, deleteStr.length, '...')
        let tempStr = lineArr.join('')
        row.push(tempStr)
        temp = ''
        break
      } else {
        row.push(temp)
        temp = chr[a]
      }
    }
  }
  row.push(temp)
  let textObj = ctx.measureText(row[row.length - 1])
  textData = {
    x,
    y,
    width: width || textObj.width,
    height: size * row.length,
    lastWidth: textObj.width,
  }
  ctx.fillStyle = color
  for (let b = 0; b < row.length; b++) {
    let sizeY = y + (b + 1) * (size + b * 5)
    ctx.fillText(row[b], x, sizeY) //每行字体y坐标间隔
    if (textDecoration == 'line-through') {
      ctx.fillRect(x, y + (b + 0.6) * size, width || textData.lastWidth, 3)
    }
  }
  return textData as textReturnOption
}
